<template>
  <div class="formHeader">
    <span>
      <h3>订单管理</h3>
    </span>
    <el-card class="box-card" style="margin: 20px" shadow="never">
      <el-form :inline="true" :model="queryParams" class="demo-form-inline">
        <el-row type="flex" justify="space-around">
          <el-form-item label="订单编号:">
            <el-input v-model="queryParams.id" placeholder="请输入订单编号" />
          </el-form-item>
          <el-form-item label="订单状态:">
            <el-select v-model="queryParams.status" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="付费状态:">
            <el-select
              v-model="queryParams.paymentStatus"
              placeholder="请选择"
              style="width: 310px"
            >
              <el-option label="未付" value="1" />
              <el-option label="已付" value="2" />
            </el-select>
          </el-form-item>
        </el-row>
      </el-form>
      <el-form ref="form" :inline="true" :model="queryParams" class="demo-form-inline">
        <el-row type="flex" justify="space-around">
          <el-form-item label="发件人姓名:">
            <el-input v-model="queryParams.senderName" placeholder="请输入发件人姓名" />
          </el-form-item>
          <el-form-item label="发件人电话:">
            <el-input v-model="queryParams.senderPhone" placeholder="请输入发件人电话" />
          </el-form-item>
          <el-form-item label="发件人地址:">
            <el-select v-model="queryParams.senderProvinceId" placeholder="请选择" style="width: 100px;margin-right: 10px" @change="getCityList">
              <el-option
                v-for="item in province"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
            <el-select v-model="queryParams.senderCityId" placeholder="请选择" style="width: 100px;margin-right: 10px" @change="getDistrictList">
              <el-option
                v-for="item in city"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
            <el-select v-model="queryParams.senderCountyId" placeholder="请选择" style="width: 100px;margin-right: 10px">
              <el-option
                v-for="item in district"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
        </el-row>
      </el-form>
      <el-form ref="form" :inline="true" :model="queryParams" class="demo-form-inline">
        <el-row type="flex" justify="space-around">
          <el-form-item label="收件人姓名:">
            <el-input v-model="queryParams.receiverName" placeholder="请输入收件人姓名" />
          </el-form-item>
          <el-form-item label="收件人电话:">
            <el-input v-model="queryParams.receiverPhone" placeholder="请输入收件人电话" />
          </el-form-item>
          <el-form-item label="收件人地址:">
            <el-select v-model="queryParams.receiverProvinceId" placeholder="请选择" style="width: 100px;margin-right: 10px" @change="getCityList">
              <el-option
                v-for="item in province"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
            <el-select v-model="queryParams.receiverCityId" placeholder="请选择" style="width: 100px;margin-right: 10px" @change="getDistrictList">
              <el-option
                v-for="item in city"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
            <el-select v-model="queryParams.receiverCountyId" placeholder="请选择" style="width: 100px;margin-right: 10px">
              <el-option
                v-for="item in district"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
        </el-row>
      </el-form>
      <el-form :inline="true" :model="queryParams" class="demo-form-inline">
        <el-row>
          <el-form-item style="margin-left: 60px">
            <el-button type="primary" @click="changeValue">搜索</el-button>
            <el-button plain @click="resetSearchParams">重置</el-button>
          </el-form-item>
        </el-row>
      </el-form>
    </el-card>

    <el-card class="box-card" style="margin: 20px" shadow="never">
      <template>
        <el-table :data="tableData" style="width: 100%">
          <el-table-column
            prop="date"
            type="index"
            label="序号"
            :index="indexMethod"
          />
          <el-table-column prop="memberId" label="订单编号" width="170" />
          <el-table-column
            prop="transportOrder.id"
            label="运单编号"
            width="140"
          />
          <el-table-column prop="createTime" label="下单时间" width="150" />
          <el-table-column prop="status" label="订单状态" width="140">
            <template v-slot="{ row }">
              <span v-if="row.status === 23000">待取件</span>
              <span v-else-if="row.status === 23001">已取件</span>
              <span v-else-if="row.status === 23002">网点自寄</span>
              <span v-else-if="row.status === 23003">网点入库</span>
              <span v-else-if="row.status === 23004">待装车</span>
              <span v-else-if="row.status === 23005">运输中</span>
              <span v-else-if="row.status === 23006">网点出库</span>
              <span v-else-if="row.status === 23007">待派送</span>
              <span v-else-if="row.status === 23008">派送中</span>
              <span v-else-if="row.status === 23009">已签收</span>
              <span v-else-if="row.status === 230010">拒收</span>
              <span v-else-if="row.status === 230011">已取消</span>
            </template>
          </el-table-column>
          <el-table-column prop="senderName" label="发件人姓名" width="140" />
          <el-table-column prop="senderPhone" label="发件人电话" width="140" />
          <el-table-column
            prop="senderAddress"
            label="发件人地址"
            width="140"
          />
          <el-table-column prop="receiverName" label="收件人姓名" width="140" />
          <el-table-column
            prop="receiverPhone"
            label="收件人电话"
            width="140"
          />
          <el-table-column
            prop="receiverAddress"
            label="收件人地址"
            width="140"
          />
          <el-table-column prop="pickupType" label="取件类型" width="140">
            <template v-slot="{ row }">
              <span v-if="row.pickupType === 1">网点自寄</span>
              <span v-else-if="row.pickupType === 0">上门取件</span>
            </template>
          </el-table-column>
          <el-table-column prop="paymentMethod" label="付费类型" width="140">
            <template v-slot="{ row }">
              <span v-if="row.paymentMethod === 1">预结</span>
              <span v-else-if="row.paymentMethod === 2">到付</span>
            </template>
          </el-table-column>
          <el-table-column prop="paymentStatus" label="付费状态" width="140">
            <template v-slot="{ row }">
              <span v-if="row.paymentMethod === 1">未付</span>
              <span v-else-if="row.paymentMethod === 2">已付</span>
            </template>
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="140">
            <template #default="{ row }">
              <el-button
                type="text"
                size="small"
                @click="skipPartitions(row.id)"
              >查看详情</el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>
      <el-pagination
        :current-page="queryParams.page"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="queryParams.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="counts"
        @size-change="changePage"
        @current-change="changePage"
      />
    </el-card>
  </div>
</template>

<script>
import { calItemNum } from '@/utils/page'
import { getAreasList } from '@/api/area'
import { getOrderList } from '@/api/order-manage'
export default {
  data() {
    return {
      tableData: [],
      counts: 0, // 总页数
      name: '',
      province: [], // 省
      city: [], // 市
      district: [], // 区
      queryParams: {
        id: '',
        page: 1,
        pageSize: 10,
        paymentStatus: '',
        pickUpType: '', // 取件类型
        receiverCityId: '',
        receiverCountyId: '',
        receiverName: '', // 收件人姓名
        receiverPhone: '',
        receiverProvinceId: '',
        senderCityId: '', // 发件人城市
        senderCountyId: '', // 发件人区域
        senderName: '', // 发件人姓名
        senderPhone: '',
        senderProvinceId: '', // 发件人省份
        status: ''// 订单状态
      },
      options: [{
        value: 23000,
        label: '待取件'
      }, {
        value: 23001,
        label: '已取件'
      },
      {
        value: 23002,
        label: '网点自寄'
      },
      {
        value: 23003,
        label: '网点入库'
      },
      {
        value: 23004,
        label: '待装车'
      },
      {
        value: 23005,
        label: '运输中'
      },
      {
        value: 23006,
        label: '网点入库'
      },
      {
        value: 23007,
        label: '待派送'
      },
      {
        value: 23008,
        label: '派送中'
      }, {
        value: 23009,
        label: '已签收'
      }, {
        value: 23010,
        label: '拒收'
      }, {
        value: 230011,
        label: '已取消'
      }, {
        value: null,
        label: '全部'
      }],
      value: {
        value1: ''
      },
      orderManagerDetail: {} // 订单详情数据
    }
  },
  created() {
    this.getOrderList()
    this.getAreasList()
  },
  methods: {
    async getOrderList() {
      const res = await getOrderList(this.queryParams)
      // console.log(res)
      // console.log(res.data.counts);
      this.tableData = res.data.items
      this.counts = +res.data.counts
    },
    changePage(newPage) {
      this.queryParams.page = newPage // 赋值新页码
      this.getOrderList() // 查询数据
    },
    async skipPartitions(id) {
      // console.log(id);
      this.$router.push(`/business/order-manage/particulars?id=${id}`)
    },
    // 计算序号
    indexMethod(index) {
      return calItemNum(
        index,
        this.queryParams.page,
        this.queryParams.pageSize
      )
    },
    // 查询按钮
    changeValue() {
      this.getOrderList()
    },
    async getAreasList() {
      const res = await getAreasList()
      // console.log(res)
      this.province = res.data
    },
    async getCityList(id) {
      const res = await getAreasList(id)
      // console.log(res)
      this.city = res.data
    },
    async getDistrictList(id) {
      const res = await getAreasList(id)
      console.log(res)
      this.district = res.data
    },
    resetSearchParams() {
      // 重置表单
      this.$refs.form.resetFields()
      this.queryParams.id = ''
      this.queryParams.status = ''
      this.queryParams.paymentStatus = ''
      this.queryParams.senderName = ''
      this.queryParams.senderPhone = ''
      this.queryParams.receiverName = ''
      this.queryParams.receiverPhone = ''
      // 重置省市区
      this.queryParams.senderProvinceId = ''
      this.queryParams.senderCityId = ''
      this.queryParams.senderCountyId = ''
      this.queryParams.receiverProvinceId = ''
      this.queryParams.receiverCityId = ''
      this.queryParams.receiverCountyId = ''
    }
  }
}
</script>

  <style scoped lang="scss">
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.inputsizt {
  width: 150px;
}
.el-header,
.el-footer {
  background-color: #b3c0d1;
  color: #333;
  text-align: center;
  line-height: 60px;
}
.body-style {
  padding: "20px";
}
/* 设置分页组件的样式 */
.el-pagination {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
}
</style>

